<template>
  <el-table ref="multipleTableRef" stripe :data="tableData" style="width: 100%" :border="tableConfig.border" @selection-change="handleSelectionChange">
    <el-table-column v-if="tableConfig.check" type="selection" width="55" />
    <el-table-column v-if="tableConfig.index" label="序号" :width="60" type="index" align="center" :index="indexMethod" />

    <component :is="ItemMap[item.name]" v-for="item in tableColumns" :item="item" :key="item.prop" @handle="handle" />

    <el-table-column v-if="tableConfig.tools" label="操作" :width="tableConfig.toolsWidth || 120" :fixed="tableConfig.toolsFixed || 'right'">
      <template #default="scope">
        <slot :scope="scope" name="tools"></slot>
      </template>
    </el-table-column>

    <template #empty>
      <el-empty />
    </template>
  </el-table>
  <div style="margin-top: 16px; overflow: hidden" v-if="page.total > page.size">
    <el-pagination
      v-model:currentPage="page.num"
      v-model:page-size="page.size"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="total, sizes, prev, pager, next"
      style="float: right"
      :total="page.total"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
  import { PropType, toRefs, ref, reactive, onMounted } from 'vue';
  import { BaseColumnType, TableConfigType } from '@/components/common-table/common-table-type';
  import { ItemMap } from './columns';
  import type { ElTable } from 'element-plus';
  import { Http } from '@/utils/http';
  import Message from '@/utils/message';

  // 随便定义一个 表格数据类型
  interface TypeTableData {
    [key: string]: any;
  }
  interface resType {
    total: number;
    list: TypeTableData[];
  }

  //  props 接收数据并转换为双向绑定
  const props = defineProps({
    tableConfig: {
      type: Object as PropType<TableConfigType>,
      default: () => ({ border: true, index: false, check: false }),
    },
    tableColumns: {
      type: Array as PropType<BaseColumnType[]>,
      default: () => [],
    },
  });
  const { tableConfig, tableColumns } = toRefs(props);
  // 声明多选结果
  const multipleSelection = ref([]);
  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  const tableData = ref<{}>([]);

  //分页组件数据
  let page = reactive({
    total: 0,
    num: 1,
    size: 10,
  });

  // 更新列表
  const initTableData = (query?: TypeTableData) => {
    const { size, num } = page;
    const params = {
      size,
      num,
      query,
    };

    // TODO: takeTableData
    Http.post(tableConfig.value.url, params).then((res) => {
      if (!res) {
        return false;
      }
      Message.success('更新列表成功！');
      tableData.value = (res as unknown as resType).list;
      page.total = (res as unknown as resType).total;
    });
  };

  const resetTable = (query?: TypeTableData) => {
    page.num = 1;
    initTableData(query);
  };

  // 序号方法
  const indexMethod = (i: number) => (page.num - 1) * page.size + i + 1;

  // 表格方法 - 多选勾选
  const handleSelectionChange = (val: any) => {
    multipleSelection.value = val;
    console.log(multipleSelection.value);
  };

  // 分页组件方法
  const handleSizeChange = (val: number) => {
    page.size = val;
    initTableData();
  };
  const handleCurrentChange = (val: number) => {
    page.num = val;
    initTableData();
  };

  // emit
  const emits = defineEmits({
    handleMethod: null,
  });
  const handle = (o: any) => {
    console.log('baseTable :: ', o);
    emits('handleMethod', o);
  };

  // 生命周期 mounted
  onMounted(() => {
    initTableData();
  });

  // 对外暴露属性
  defineExpose({
    multipleSelection,
    page,
    initTableData,
    resetTable,
  });
</script>

<style scoped lang="scss">
  .el-pagenation {
    --el-pagination-hover-color: red !important;
  }
</style>
